<template>
  <div ref="uploadBtn">
    <slot :parentData="parentData"> </slot>
  </div>
</template>
<script>
var reader = new FileReader();
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import { uploadServer } from "@/axios/index.js";

// 上传文件地址
// const urls = {
//   server: "http://192.168.1.25:9555/",
// };

export default defineComponent({
  emits: ["error", "progressChange", "sucess", "fileQueued"],
  props: {
    checkReturn: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "png,jpg",
    },
    propsData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let uploadBtn = ref(null);
    let data = reactive({
      parentData: "",
    });

    watch(
      () => props.propsData,
      (newVal, oldVal) => {
        // data.parentData =JSON.parent(JSON.stringify(newVal));
        // console.log(data.parentData);
        data.parentData = newVal;
      },
      {
        deep: true,
      }
    );

    // 读取文件元数据
    let duqu = async (file) => {
      let text = "";
      return new Promise((resolve, reject) => {
        try {
          reader.readAsArrayBuffer(file.source.source);
          reader.onload = async (event) => {
            // 读取文件数据
            const data = event.target.result;
            // 创建一个DataView对象
            const dataView = new DataView(data);
            // 检查文件是否是PNG格式
            const isPng = dataView.getUint32(0, false) === 0x89504e47;
            if (!isPng) {
              console.log("不是PNG格式的图像文件");
              // return text;
              resolve(text);
            }
            // 获取文件元数据信息
            let offset = 8;
            let chunkType, chunkSize, chunkData, crc;
            while (offset < dataView.byteLength) {
              chunkSize = dataView.getUint32(offset, false);
              offset += 4;
              chunkType = String.fromCharCode(
                dataView.getUint8(offset),
                dataView.getUint8(offset + 1),
                dataView.getUint8(offset + 2),
                dataView.getUint8(offset + 3)
              );
              offset += 4;
              console.log(
                chunkType,
                "chunkTypechunkTypechunkTypechunkTypechunkTypechunkType"
              );
              if (chunkType === "tEXt") {
                const nullByteIndex = Array.from(
                  new Uint8Array(
                    dataView.buffer.slice(offset + 1, offset + chunkSize)
                  )
                ).findIndex((b) => b === 0);
                const keyword = String.fromCharCode.apply(
                  null,
                  new Uint8Array(
                    dataView.buffer.slice(
                      offset + 1,
                      offset + nullByteIndex + 1
                    )
                  )
                );
                text = String.fromCharCode.apply(
                  null,
                  new Uint8Array(
                    dataView.buffer.slice(
                      offset + nullByteIndex + 2,
                      offset + chunkSize
                    )
                  )
                );
                // console.log(`PNG图像包含文本信息：${keyword}: ${text}`);
                // console.log(text);
              }

              offset += chunkSize;
              crc = dataView.getUint32(offset, false);
              offset += 4;
            }
            // return text;
            resolve(text);
          };
        } catch (error) {
          resolve(text);
        }
      });
    };
    /// 阿里云上传
    // let alipaygo = () => {};
    let goalipay = async (data) => {
      const client = new OSS({
        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
        region: "oss-cn-hangzhou",
        // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
        accessKeyId: "STS.NUwenHQZu2WEJmQDwvsTSWK2R",
        accessKeySecret: "AgxPF2as6pzbWoyACBYwFLgp5QokiJEckaZVCEEPTMHC",
        secure: true,
        // 从STS服务获取的安全令牌（SecurityToken）。
        stsToken:
          "CAIS8AF1q6Ft5B2yfSjIr5bCLtT8vIVUhZWuSEvgoHcjf9t/uI6ZsDz2IH9LfnBpAOsYtf4zmGxS6P8TlqJIRoReREvCUcZr8sz7H/dX99KT1fau5Jko1beHewHKeTOZsebWZ+LmNqC/Ht6md1HDkAJq3LL+bk/Mdle5MJqP+/UFB5ZtKWveVzddA8pMLQZPsdITMWCrVcygKRn3mGHdfiEK00he8Tont/nvm5zDtEGF0AanmrEvyt6vcsT+Xa5FJ4xiVtq55utye5fa3TRYgxowr/gp1vUdoGyZ5YvBXwULvUzXKYTO+9hoNxRp7EHc8H6HNpEagAFptB7XY7lrL8kweIxaZ07vc/lG9Cfl/JKhOXMuedRd5vQm9e8uI8vdDLZINfFf9dsEWyYu0Pcsjo1eQbW49NS2nrLmu4m88b86CYWRXJaqL/WA+SgVj+Z+pcNkb3La+AUDc48sS9QDxbcoLhNPZPfhjbcJo+6zXBA33e8b2zshuQ==",
        // 填写Bucket名称，例如examplebucket。
        bucket: "i-desai",
        // RequestId: "55D95048-A5FC-56A3-80BD-EE207ACF5135",
      });

      const headers = {
        "Access-Control-Allow-Origin": "*",

        // 指定该Object被下载时的网页缓存行为。
        "Cache-Control": "no-cache",
        // 指定该Object被下载时的名称。
        "Content-Disposition": "b5cbd43ec6d9fe2f24a324e59043bbc.png",
        // 指定该Object被下载时的内容编码格式。
        "Content-Encoding": "utf-8",
        // 指定过期时间，单位为毫秒。
        Expires: "1000",
        // 指定Object的存储类型。
        "x-oss-storage-class": "Standard",
        // 指定Object标签，可同时设置多个标签。
        "x-oss-tagging": "Tag1=1&Tag2=2",
        // 指定初始化分片上传时是否覆盖同名Object。此处设置为true，表示禁止覆盖同名Object。
        "x-oss-forbid-overwrite": "true",
      };
      // 指定上传到examplebucket的Object名称，例如exampleobject.txt。
      const name = "/upload/b5cbd43ec6d9fe2f24a324e59043bbc.png";
      // 获取DOM。
      const submit = document.getElementById("submit");
      const options = {
        // 获取分片上传进度、断点和返回值。
        progress: (p, cpt, res) => {
          console.log(p);
        },
        // 设置并发上传的分片数量。
        parallel: 4,
        // 设置分片大小。默认值为1 MB，最小值为100 KB。
        partSize: 1024 * 1024,
        // headers,
        // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
        meta: { year: 2020, people: "test" },
        mime: "text/plain",
      };
      try {
        // 分片上传。
        const res = await client.multipartUpload(name, data, {
          ...options,
        });
        console.log(res);
      } catch (err) {
        console.log(err);
      }
    };
    let initUpload = () => {
      // 初始化上传控件
      let uploader = $.uploaderInit({
        // server: uploadServer + "/file/breakpoint-upload",
        server: "/api" + "/file/check-file",
        pick: {
          // id: '#addFile',
          id: uploadBtn.value,
          multiple: true,
        },
        timeout: 600000,
        method: "POST",
        headers: {
          Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0",
          "blade-auth": "bearer " + store.state.accessToken,
        },
        dnd: uploadBtn.value,
        // chunked: true,
        chunked: false,
        // fileSizeLimit:1024, //文件总大小
        duplicate: true, //允许重复
        accept: [
          {
            extensions: props.type, //支持文件类型
          },
        ],
        // 文件队列
        fileQueued: (file) => {
          file.name = Date.now() + file.name; //文件名+时间戳 防止重复
          // count++;
          //   // 追加新数据
          //   if (file.name.length > 10) {
          //       $("#fileList ul").append(
          //           `<li class="fl-li"><i class="fileId">${file.id}</i><img src="${getFileLogo(file.ext)}"><label>${file.name.substring(0, 10)}…</label><span class="tooltiptext">${file.name}<span style="color: red"> - 新文件刷新后可下载</span></span></li>`
          //       );
          //   } else {
          //       $("#fileList ul").append(
          //           `<li class="fl-li"><i class="fileId">${file.id}</i><img src="${getFileLogo(file.ext)}"><label>${file.name}</label></li>`
          //       );
          //   }
          //   $("#upcData").append(
          //       `<li id="${file.id}"><p>${file.name}</p><div class="progress"><span></span>
          // <div class="child"></div></div></li>`
          //   );
          //   $('.up-content').css('display', "block");
          //   $('#up-spread').attr('src', "./img/下.png");
          // 上传文件

          // console.log(props.checkReturn);
          // if (!props.checkReturn) {
          //   emit("fileQueued", file);
          //   uploader.upload(uploader.getFile($(this).data("fid"), true));
          // }
          console.log(file, "filefilefilefile");
          goalipay(file.source.source);
        },

        // 上传文件之前先计算文件的MD5和ID
        uploadBeforeSend: (object, data, headers) => {
          let file = object.file;
          data.md5 = file.md5 || "";
          data.uid = file.uid;
          // console.log("上传前",file.name);
          // file.name =Date.now()+file.name;
        },
        // 上传进度更新
        uploadProgress: (file, percentage) => {
          let pro = Math.round(percentage * 100);
          //文字提示
          // $("#" + file.id + ' span').text("正在上传：" + pro + "%");
          //动态改变div的宽度占比
          // $("#" + file.id + ' .child').width(pro + "%");
          // console.log(pro)
          emit("progressChange", pro);
        },
        // 上传完成后执行
        uploadSuccess: async (file, response) => {
          console.log(response, "xxx");

          //动态改变div的宽度占比
          // $("#" + file.id + ' .child').width("100%");
          // $("#" + file.id + ' span').text("上传完成");
          // $.ajax({
          //   type: "post",
          //   url: uploadServer + "/file/add",
          //   async: true,
          //   contentType: "application/json; charset=utf-8",
          //   data: JSON.stringify({
          //     fileName: file.name,
          //     suffix: file.ext,
          //   }),
          //   success: async function (res) {
          // TODO 刷新文件列表，但是当文件过多时，页面交互表现得不太友好，所以这里自行使用
          // partialRefresh();
          // let text = await duqu(file);
          emit("sucess", {
            name: file.name,
            // url: uploadServer + "/file/downloads/" + file.name,
            url: response.data.link,
            file: file,
            text,
            //   });
            // },
          });
        },
        // 上传出错时执行
        uploadError: (file, reason) => {
          // $("#" + file.id + ' span').text("上传出错");
          // console.log("出错",reason);
          emit("error", reason);
        },
        beforeInit: () => {
          // 这个必须要写在实例化前面
          WebUploader.Uploader.register(
            {
              "before-send-file": "beforeSendFile",
              "before-send": "beforeSend",
            },
            {
              // 时间点1：所有分块进行上传之前调用此函数
              beforeSendFile: function (file) {
                // console.log(file,'xx')
                let deferred = WebUploader.Deferred();
                new WebUploader.Uploader()
                  .md5File(file, 0, 5242880)
                  .progress(function (percentage) {
                    // 显示计算进度
                    // $('#' + file.id).find("td.state").text("校验MD5中...");
                    console.log("校验md5");
                  })
                  .then(function (val) {
                    file.md5 = val;
                    file.uid = WebUploader.Base.guid();
                    // 进行md5判断
                    // $.ajax({
                    //   url: uploadServer + "/file/check-file",
                    //   type: "GET",
                    //   showError: false,
                    //   global: false,
                    //   data: {
                    //     fileName: file.name,
                    //     md5: file.md5,
                    //   },
                    //   success: (data) => {
                    //     let status = data.errorCode;
                    deferred.resolve();
                    //   switch (status) {
                    //     case 0:
                    //       // 忽略上传过程，直接标识上传成功；
                    //       uploader.skipFile(file);
                    //       file.pass = true;
                    //       break;
                    //     case 16:
                    //       // 部分已经上传到服务器了，但是差几个模块。
                    //       file.missChunks = data.data;
                    //       break;
                    //     default:
                    //       break;
                    //   }
                    // },
                    // });
                  });
                return deferred.promise();
              },
              // 时间点2：如果有分块上传，则每个分块上传之前调用此函数
              beforeSend: function (block) {
                let deferred = WebUploader.Deferred();
                // 当前未上传分块
                let missChunks = block.file.missChunks;
                // 当前分块
                let blockChunk = block.chunk;
                if (
                  missChunks !== null &&
                  missChunks !== undefined &&
                  missChunks !== ""
                ) {
                  let flag = true;
                  for (let i = 0; i < missChunks.length; i++) {
                    if (blockChunk === parseInt(missChunks[i])) {
                      // 存在还未上传的分块
                      flag = false;
                      break;
                    }
                  }
                  if (flag) {
                    deferred.reject();
                  } else {
                    deferred.resolve();
                  }
                } else {
                  deferred.resolve();
                }
                return deferred.promise();
              },
            }
          );
        },
        error: (type) => {
          if (type === "Q_EXCEED_NUM_LIMIT") {
            // console.error("文件数量超出限制");
            ElMessage.error("文件数量超出限制");
          } else if (type === "Q_TYPE_DENIED") {
            // console.error("文件类型不满足条件");
            // ElMessage.error("文件类型不满足条件");
            ElMessage.error("文件格式不支持,请上传" + props.type + "格式文件");
          } else if (type === "Q_EXCEED_SIZE_LIMIT") {
            // console.error("文件总大小超出限制");
            ElMessage.error("文件总大小超出限制");
          } else if (type === "F_DUPLICATE") {
            // console.error("请勿重复添加");
            ElMessage.error("已存在同名文件");
          } else if (type === "F_EXCEED_SIZE") {
            // console.error("文件过大");
            ElMessage.error("文件过大");
          } else {
            // console.error(type);
            ElMessage.error(type);
          }
          emit("error", type);
        },
      });
    };

    onMounted(() => {
      proxy.$nextTick(() => {
        initUpload();
        // alipaygo();
      });
    });

    return {
      goalipay,
      // alipaygo,
      uploadBtn,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss">
.webuploader-container {
  position: relative;
}
.webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.webuploader-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
  // padding: 5px 5px;
  text-align: center;
  // border-radius: 3px;
  overflow: hidden;
}

.webuploader-pick-disable {
  opacity: 0.6;
  pointer-events: none;
}

.webuploader-domain {
  top: 0px !important;
  left: 0px !important;
}
</style>
